<template>
  <a-layout class="layout-page">
    <a-layout-sider
      :theme="Theme.menuTheme"
      class="layout-sider"
      breakpoint="lg"
      :width="Theme.siderWidth"
      :collapsed-width="Theme.siderCollapWidth"
      :collapsed="collapsed"
    >
      <logo />
      <sider-menu :menu-list="menuList" :theme="Theme.menuTheme" />
    </a-layout-sider>
    <a-layout
      :style="{ 'margin-left': `${collapsed ? Theme.siderCollapWidth : Theme.siderWidth}px` }"
      class="layout-right"
      :class="{
        'layout-page--boxshadow': !Theme.tabsView
      }"
    >
      <a-affix :offset-top="Theme.fixedHeader ? 0 : -1000">
        <a-layout-header
          class="layout-header"
          :style="{ height: `${Theme.headerHeight}px`, 'line-height': `${Theme.headerHeight}px` }"
        >
          <header-left class="layout-header--left" @update="handleChangeCollapsed" />
          <header-right class="layout-header--right" />
        </a-layout-header>
      </a-affix>
      <a-layout-content class="layout-content">
        <a-affix v-if="Theme.tabsView" :offset-top="Theme.fixedHeader ? Theme.headerHeight : 0">
          <tab-bar :menu-list="menuList" />
        </a-affix>
        <app-main />
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script setup>
import SiderMenu from './menu/SiderMenu.vue'
import Logo from './header/Logo.vue'
import HeaderLeft from './header/HeaderLeft.vue'
import HeaderRight from './header/HeaderRight.vue'
import TabBar from './tabview/TabBar.vue'
import AppMain from './main/AppMain.vue'

import { ref, provide, onMounted } from 'vue'
import { Theme } from '@/config'
import { useMenuStore } from '@/store/modules/menu'

const collapsed = ref(false)
const useMenu = useMenuStore()
const menuList = useMenu.menuList

/**
 * 注册provide
 */
provide('collapsed', collapsed)

/**
 * 切换collapsed状态
 */
const handleChangeCollapsed = () => {
  collapsed.value = !collapsed.value
}

/**
 * 监测窗口大小改变
 */
const updateCollapsed = () => {
  const width = document.body.clientWidth
  if (width < 1100) {
    collapsed.value = true
  } else {
    collapsed.value = false
  }
}

onMounted(() => {
  updateCollapsed()
  window.addEventListener('resize', () => {
    return (() => {
      updateCollapsed()
    })()
  })
})
</script>
